<script setup lang="ts">
import { LoginForm } from "./components";
import { underlineToHump } from "@/utils";
import { useAppStore } from "@/store/modules/app";
import { useDesign } from "@/hooks/web/useDesign";
import {ref,computed} from 'vue'
import VersionFrom from './components/VersionForm.vue'
import {Dialog} from '@/components/Dialog';
import {ElButton} from 'element-plus';

const { getPrefixCls } = useDesign();

const prefixCls = getPrefixCls("login");

const appStore = useAppStore();
const versionCode=computed(() => appStore.getVersionCode)
// const date = new Date().getFullYear()
const isShowVersion=ref(false)
const showVersion=()=>{
  isShowVersion.value=true
}
</script>

<template>
  <div
    :class="prefixCls"
    class="h-[100%] relative overflow-hidden <xl:bg-v-dark <sm:px-10px <xl:px-10px <md:px-10px loginBgSmart"
  >
    <div class="relative h-full flex mx-auto">
      <div
        :class="`${prefixCls}__left flex-1 relative p-30px <xl:hidden`"
      >
        <div class="flex justify-center relative text-white" style="align-items:center">
          <img src="@/assets/imgs/logo.png" alt="" class="w-110px h-100px mr-10px" />
          <span class="text-44px font-bold" style="color: #306fff;">{{
            underlineToHump(appStore.getTitle)
          }}</span>
        </div>
        <div class="flex justify-center items-center h-[calc(100%-60px)]">
          <!-- <TransitionGroup
            appear
            tag="div"
            enter-active-class="animate__animated animate__bounceInLeft"
          >
            <img src="@/assets/svgs/login-box-bg.svg" key="1" alt="" class="w-350px" />

          </TransitionGroup> -->
        </div>
      </div>
      <div class="flex-1 p-30px <sm:p-10px dark:bg-v-dark relative">
        <div
          class="flex justify-between items-center text-white @2xl:justify-end @xl:justify-end"
        >
          <div class="flex items-center @2xl:hidden @xl:hidden">
            <img src="@/assets/imgs/logo.png" alt="" class="w-48px h-48px mr-10px"  style="margin-top: 20px;"/>
            <span class="text-20px font-bold" style="color: #306fff ; white-space: nowrap;">{{
              underlineToHump(appStore.getTitle)
            }}</span>
          </div>
        </div>
        <Transition appear enter-active-class="animate__animated animate__bounceInRight">
          <div
            class="h-full flex items-center m-auto w-[100%] @2xl:max-w-400px @xl:max-w-400px @md:max-w-400px @lg:max-w-400px"
          >
            <LoginForm class="p-20px h-auto m-auto <xl:(rounded-3xl light:bg-white)" />
          </div>
        </Transition>
      </div>
      <div style="text-align:center; position: absolute; bottom: 30px; left: 0; right: 0; color: #779dcc; font-size: 12px;">
        <span style="margin-left: 10px;">版本信息：专注力评估管理平台</span>
        <span style="margin-left: 10px;" @click="showVersion" id="version">当前版本：{{versionCode}}</span>
      </div>
    </div>

  </div>
  <Dialog
      v-model="isShowVersion" title="版本说明" max-height="500px" width="760px"
      append-to-body="true">
      <VersionFrom />
      <template #footer>
      <ElButton @click="isShowVersion = false">关闭</ElButton>
    </template>
  </Dialog>
</template>

<style lang="less" scoped>
@prefix-cls: ~"@{namespace}-login";

.@{prefix-cls} {
  &__left {
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background-image: url("@/assets/svgs/login-bg.svg");
      background-position: center;
      background-repeat: no-repeat;
      content: "";
    }
  }
}
.loginBgSmart {
  background: url("@/assets/imgs/loginbg.jpg") no-repeat center top;
}
</style>
